<template>
 <div class="comment">
     <div class="container-fluid">
         <div class="row">
             
             <ul class="p-0 col-12">
                 <li v-for="(item,index) in comments"  :key="item.id">
                     <div class="user-operation" v-if="index<3">
                         <div class="left">
                             <img :src="item.userPic" class="comment-icon img-fluid" alt="">
                             {{item.userName}}
                            <span class="time"> {{$moment(item.time).format(('YYYY-MM-DD hh:mm:ss'))}} </span>
                         </div>
                         <div class="right float-right">
                             <span class="jb">举报</span>
                             <span class="writeReply">回复</span>
                             <span class="watchReply">查看评论({{$util.changeNum(item.replyNum)}})</span>
                             <span class="prizeNum">{{item.prizeNum}}</span>
                         </div>
                     </div>
                     <div class="content pl-4">
                         {{item.content}}
                     </div>
                     <div class="reply">
                         {{hhh}}
                     </div>
                 </li>
             </ul>
         </div>
     </div>
 </div>
</template>

<script>
import $moment from "moment";

 export default {
   data () {
     return {
         comments:[]
     }
   },
   props:{
       'article':{
           type:Object,
           required:true
            }
       },
   components: {

   },
   methods:{
       getComments(){
           this.$axios.get(this.$url+'getComments?articleId='+this.article.articleId)
           .then(data=>{
               console.log(data.data)
              this.comments = data.data.data;
           })
       }
   },
   created(){
       console.log(this.$util)
       this.getComments();
   }
 }
</script>

<style scoped lang='less'>
.comment-icon{
     height: 20px;
    width: 20px;
    border-radius: 50%;
}
.user-operation:hover .jb{
        display: inline;
    }
.user-operation:hover .writeReply{
        display: inline;
    }
   
.user-operation{

    display: flex;
    justify-content: space-between;
    align-items: center;
    .right{
        font-size: 12px;
        
    }
    .jb,.writeReply{
        display: none;
        cursor: pointer;
    }
    .watchReply{
        cursor: pointer;
    }
    .left{
        font-size: 14px;
        font-weight: bold;
        color: #2e2e2e;
        .time{
            font-weight: normal;
            font-size: 12px;
            color: #999;
        }
    }
}
.content{
    color: #4d4d4d;
    font-size: 14px;

}
li{
    list-style: none;
}
 
</style>
